<template>
	<div class="header">
		<div class="content-warper" @click="Show">
			<div class="avatar">
				<img width="64" height="64" src="../assets/logo.png" style="width: 50px; height: 50px;">
			</div>
			<div class="content">
				<div class="title">
					<span class="brand"></span>
					<span class="name">{{seller.name}}</span>
				</div>
				<div class="description">
					{{seller.description}}/{{seller.deliveryTime}}分钟送达
				</div>
				<div v-if="seller.supports" class="support">
					<span class="icon" :class="classMap[seller.supports[0].type]"></span>
					<span class="text">{{seller.supports[0].description}}</span>
				</div>
			</div>
		    <div v-if="seller.supports" class="support-count">
		    	<span class="count" >{{seller.supports.length}}个</span>
		    	<i></i>
		    </div>
		</div>
		<div class="bulletin-warper">
			<span class="bullentin-tittle"></span>
			<span class="bullentin-text">{{seller.bulletin}}</span>
		</div>
		<div class="background" >
			<img src="../assets/logo.png" style="width: 100%;height: 100%;"/>
		</div>
		<div class="detail" v-if="detailShow" @click="Show">
			<div class="detail-wrapper clearfix">
				<div class="detail-main">
					<h1 class="name">{{seller.name}}</h1>
					<div class="star-warp">
						<star :size="48" :score="seller.score"></star>
					</div>
					<div class="in-title">
						<div class="in-line"></div>
						<div class="in-text">优惠信息</div>
						<div class="in-line"></div>
					</div>
					<ul v-if="seller.supports" class="in-supports">
						<li v-for="(item,index) in seller.supports" class="in-item">
							<span class="in-icon" :class="classMap[seller.supports[index].type]"></span>
							<span class="inn-text">{{seller.supports[index].description}}</span>
						</li>
					</ul>
					<div class="in-title">
						<div class="in-line"></div>
						<div class="in-text">商家公告</div>
						<div class="in-line"></div>
					</div>
					<div class="inn-bulletin">
						<p class="in-content">{{seller.bulletin}}</p>
					</div>
				</div>
			</div>
			<div class="detail-close">
				<div class="close"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import star from './star/star'
	export default{
		data() {
			return {
				classMap:[],
				detailShow:false
			}
		},
		props:["seller"],
		created:function(){
			this.classMap=['decrease','discount','special','invoice','guarantee'];
		},
		methods:{
			Show:function(){
				this.detailShow=!this.detailShow;
			}
		},
		components:{
			star
		}
	}
</script>

<style>
	.header{
		position: relative;
		color: white;
		background-color: rgba(7,17,27,0.5);
	}
	.content-warper{
		position: relative;
		padding: 24px 12px 18px 24px;
	}
	.avatar,.content{
		display: inline-block;
	}
	.content{
		
		margin-left: 16px;
	}
	.title{
		margin: 2px 0 8px 0;
	}
	.brand{
		vertical-align: top;
		width: 30px;
		height: 18px;
		display: inline-block;
		background-image: url(brand@2x.png);
		background-size: 30px 18px;
		background-repeat: no-repeat;
	}
	.name{
		margin-left: 6px;
		font-size: 16px;
		line-height: 16px;
	}
	.description{
		margin-bottom: 10px;
		line-height: 12px;
		font-size: 12px;
	}
	.avatar{
		text-align:left;
		vertical-align: top;
	}
	.avatar.img{
		border-radius: 5px;
	}
	.support .icon{
		vertical-align: top;
		display: inline-block;
		width: 12px;
		height: 12px;
		margin-right: 4px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.decrease{
		background-image: url(decrease_1@2x.png);
	}
	.discount{
		background-image: url(discount_1@2x.png);
	}
	.invoice{
		background-image: url(invoice_1@2x.png);
	}
	.special{
		background-image: url(special_1@2x.png);
	}
	.guarantee{
		background-image: url(guarantee_1@2x.png);
	}
	.support .text{
		display: inline-block;
		font-size: 12px;
		line-height: 12px;
	}
	.support-count{
		position: absolute;
		right: 12px;
		bottom: 18px;
		padding: 0 8px;
		height: 24px;
		line-height: 24px;
		border-radius: 14px;
		background-color: rgba(15,0,0,0.2);
		text-align: center;
	}
	.count{
		font-size: 10px;
	}
	.bulletin-warper{
		height: 28px;
		line-height: 28px;
		padding: 0 22px 0 12px;
		white-space: nowrap;
		overflow: hidden;
        text-overflow: ellipsis;
        background-color: rgba(7,17,27,0.2);
	}
	.bullentin-tittle{
		display: inline-block;
		vertical-align: middle;
		width: 22px;
		height: 12px;
		background-image: url(brand@2x.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.bullentin-text{
		margin: 0 4px;
		font-size: 12px;
	}
	.background{
		z-index: -1;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		filter: blur(10px);
	}
	.detail{
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background: rgba(7,17,27,0.8);
	}
	.detail .detail-wrapper{
		min-height: 100%;
		width: 100%;
	}
	.detail .detail-main{
		line-height: 10px;
		margin-top: 64px;
		padding-bottom:64px ;
		
	}
	.detail-close{
		position: relative;
		width: 32px;
		height: 32px;
		margin: -64px auto 0 auto;
		clear: both;
		font-size: 32px;
	}
	.close{
		margin: 0;
		width: 32px;
		height: 32px;
		background-color: red;
		border-radius: 50%;
	}
    .name{
    	font-size: 16px;
    	line-height: 16px;
    	text-align: center;
    }
    .star-warp{
    	margin-top: 18px;
    	padding: 2px 0;
    	text-align: center;
    }
    .in-title{
    	display: flex;
    	width: 80%;
    	margin: 28px auto 24px auto;
    }
    .in-line{
    	flex: 1;
    	position: relative;
    	top: -6px;
    	border-bottom: 1px solid rgba(225,225,225,0.2);
    }
    .in-text{
    	 padding: 0 12px;
    	 font-weight: 700;
    	 font-size: 12px;
    }
    .in-supports{
    	width: 80%;
    	margin: 0 auto;
    	
    }
    .in-item{
    	padding: 0 12px;
    	margin-bottom:12px;
    	font-size: 0;
    	
    }
    .in-item:last-child{
    	margin-bottom: 0;
    	
    }
    .in-icon{
    	display: inline-block;
    	width: 16px;
    	height: 16px;
    	vertical-align: top;
    	margin-right: 6px;
    	background-size: 100% 100%;
    	background-repeat: no-repeat;
    	
    }
    .inn-text{
    	font-size: 12px;
    	line-height: 16px;
    	
    }
    .in-item .decrease{
    	background-image: url(decrease_2@2x.png);
    }
    .in-item .discount{
    	background-image: url(discount_2@2x.png);
    }
    .in-item .invoice{
    	background-image: url(invoice_2@2x.png);
    }
    .in-item .special{
    	background-image: url(special_2@2x.png);
    }
    .in-item .guarantee{
    	background-image: url(guarantee_2@2x.png);
    }
    .inn-bulletin{
    	padding: 0 13px 15px;
    }
    .in-content{
    	padding: 0 13px;
    	text-indent: 26px;
    	font-size: 13px;
    	line-height: 20px;
    }
</style>